import { useState } from 'react'
import {
  Dialog,
  DialogHeader,
  DialogTitle,
  DialogContent,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog'
import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'


type Props = {
  visible: boolean
  className?: string
  title?: React.ReactNode
  defaultQuality?: string
  description?: React.ReactNode | undefined
  onConfirm: (quality: string) => void | Promise<void>
  onCancel?: () => void | Promise<void>
  onClose: () => void | Promise<void>
  confirmText?: string
  cancelText?: string | undefined
}

const QualitySelectModal = (props: Props): JSX.Element => {

  const {
    visible,
    className,
    title,
    defaultQuality,
    description,
    onConfirm,
    onCancel,
    onClose,
    confirmText = '确定',
    cancelText = '取消',
  } = props

  const [quality, setQuality] = useState<string>(defaultQuality || '128k')

  const handleOpenChange = (open: boolean): void => {
    if (!open) onClose()
  }

  return <Dialog open={visible} onOpenChange={handleOpenChange}>
    <DialogContent className={cn('max-w-sm', className)}>
      {title ? <DialogHeader>
        <DialogTitle>{title}</DialogTitle>
        <DialogDescription>{description}</DialogDescription>
      </DialogHeader> : <VisuallyHidden>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
      </VisuallyHidden>}
      <div className='flex flex-col gap-2'>
        {['128k', '320k', 'flac', 'flac24bit', 'hires'].map((item, index) => {
          return <Button
            key={index}
            className={cn('flex flex-row items-center justify-center cursor-pointer py-2')}
            variant={quality === item ? 'default' : 'secondary'}
            onClick={() => {
              setQuality(item)
            }}>{item}</Button>
        })}
      </div>
      <DialogFooter className='flex justify-center items-center gap-2 sm:justify-center'>
        {cancelText && <Button variant='outline' onClick={onCancel}>{cancelText}</Button>}
        <Button onClick={() => onConfirm(quality)}>{confirmText ?? 'Confirm'}</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>

}

export default QualitySelectModal
